<template>
	<div class="area-delay-charts-container">
		<div v-if="areas.length === 0" class="empty-state">
			<el-empty description="暂无区域数据" :image-size="60" />
		</div>
		<div v-else class="charts-grid">
			<div 
				v-for="area in areas" 
				:key="area.value || 'null'" 
				class="chart-item"
			>
				<el-card class="chart-card" shadow="hover">
					<template #header>
						<div class="chart-header">
							<el-icon><ele-Location /></el-icon>
							<span class="area-name">{{ area.label }}</span>
						</div>
					</template>
					<div class="chart-content">
						<AreaDelayChart 
							:data="getChartData(area.value)" 
							:loading="!getChartData(area.value) || Object.keys(getChartData(area.value)).length === 0" 
						/>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed, onMounted, nextTick } from 'vue';
import AreaDelayChart from './AreaDelayChart.vue';

interface Area {
	value: number | null;
	label: string;
}

interface QueryParams {
	workTime: string;
	className: number | null;
	workAreaId: number | null;
	keyword: string;
	planStart: boolean;
}

interface Props {
	areas: Area[];
	queryParams: QueryParams;
	chartDataCache: Record<number, any[]>;
}

const props = defineProps<Props>();

// 获取图表数据
const getChartData = (areaId: number | null) => {
	if (!areaId) return {};
	return props.chartDataCache[areaId] || {};
};

// 暴露 resize 方法
const resize = () => {
	// 这里可以添加图表resize逻辑
};

defineExpose({
	resize
});
</script>

<style lang="scss" scoped>
.area-delay-charts-container {
	.empty-state {
		padding: 40px 0;
		text-align: center;
	}

	.charts-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
		gap: 20px;
	}

	.chart-item {
		.chart-card {
			height: 400px;
			border-radius: 8px;
			overflow: hidden;

			.chart-header {
				display: flex;
				align-items: center;
				gap: 8px;
				font-size: 14px;
				font-weight: 600;
				color: var(--el-text-color-primary);

				.area-name {
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.chart-content {
				height: calc(100% - 56px);
				padding: 0;
			}
		}
	}
}

// 响应式设计
@media (max-width: 768px) {
	.area-delay-charts-container {
		.charts-grid {
			grid-template-columns: 1fr;
			gap: 15px;
		}

		.chart-item {
			.chart-card {
				height: 350px;
			}
		}
	}
}
</style> 